<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>沐芃科技</title>
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <style>
        #content {
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;
	}

	.topMain {
		width: 100%;
		height: 100%;
	}

	.topMain .topImg {
		width: 100%;
		height: 390px;
	}

	/* 	.topMain img {
		width: 100%;
		height: 100%;
	} */

	.footList {
		width: 100%;
		height: calc(100% - 390px);
		background-color: #fd733b;
	}

	.inviteCode {
		width: 85%;
		height: 25px;
		background: #FDD8BF;
		border-radius: 13px;
		color: #BB4A26;
		font-size: 12px;
		/* position: absolute;
		top: 390px;
		left: 50%; */
		margin: 0 auto;
		/* transform: translate(-50%, 20px); */
	}

	.inviteCode img {
		width: 54px;
		height: 22px;
		margin-right: 10px;
	}

	.shareBox {
		width: 90%;
		/* height: 12%; */
		/* background-color: #6797FD; */
		/* position: absolute;
		top: 470px;
		left: 50%; */
		margin: 32px auto 18px;
		/* transform: translate(-50%, 0); */
	}

	.shareBox .oneBox {
		/* width: 45%;
		height: 100%; */
		padding: 15px 30px;
		background: linear-gradient(0deg, #FDEF8D 0%, #FCC215 100%);
		border-radius: 20px;
	}

	.shareBox .oneBox img {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	.shareBox .oneBox p {
		font-size: 12px;
		color: #BB4A26;
		font-weight: bold;
	}

	.bottLists {
		width: 95%;
		height: 250px;
		background: #FDD8BF;
		border-radius: 5px;
		/* position: relative; */
		margin: 20px auto;
		/* position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translate(-50%, 20px); */
	}

	.bottLists .text {
		/* position: absolute;
		left: 50%;
		top: -0px;
		transform: translate(-50%, -10px); */
		margin: -15px auto 8px;
		/* width: 160px;
		height: 30px; */
		padding: 8px 45px;
		background: linear-gradient(0deg, #FFAC2A 0%, #FFCF60 100%);
		border-radius: 5px;
		color: #FFF;
		font-size: 15px;
		/* 	line-height: 30px;
		text-align: center; */
	}

	.bottLists .bottList {
		width: 90%;
		height: 210px;
		/* background-color: #BB4A26; */
		/* position: absolute;
		left: 50%;
		top: 35px;
		transform: translate(-50%, 0px); */
		margin: 0 auto;
	}

	.bottLists .bottList .listOne {
		width: 100%;
		height: 65px;
		/* background-color: aquamarine; */
		position: relative;

	}

	.bottLists .bottList .listOne .bg_one {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.bottLists .bottList .listOne .circle {
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
		height: 65px;
	}

	.bottLists .bottList .listOne .left {
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
		height: 65px;
		color: #6797FD;
	}

	.bottLists .bottList .listOne .right {
		width: calc(100% - 70px);
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		color: #DAEDFC;
	}
    </style>
</head>

<body>
    <div id="view" v-cloak>


        <div id="content">
			<div class="topMain flex_column">
				<img src="../../image/img/rw_center1/bg_one2.png" alt="" class="topImg">
				<div class="footList flex_column">
					<div class="inviteCode flex_between">
						<p style="margin-left: 40px;font-weight: bold;">我的邀请码：{{ffInfo.send_code}}</p>
						<img src="../../image/img/rw_center1/copy.png" alt="" onclick="copyTxt(view.ffInfo.send_code)">
					</div>

					<div class="shareBox flex_around">
						<div class="oneBox flex_center" onclick="_url({url:'frame4/ewm', title:'查看邀请二维码'})">
							<img src="../../image/img/rw_center1/photo.png" alt="">
							<p>海报分享</p>
						</div>
						<div class="oneBox flex_center" onclick="copyTxt(share_url + '/h5/#/pages/login/register?yq=' + view.ffInfo.send_code)">
							<img src="../../image/img/rw_center1/link.png" alt="">
							<p>链接分享</p>
						</div>
					</div>

					<div class="bottLists flex_column">
						<div class="text">
							邀请奖励
						</div>
						<div class="bottList flex_column_around">
							<div class="listOne flex">
								<img src="../../image/img/rw_center1/bg_one.png" alt="" class="bg_one">
								<img src="../../image/img/rw_center1/circle.png" alt="" class="circle">
								<div class="left flex_column_center">
									<p style="font-size: 12px;">8888</p>
									<p style="font-size: 10px;">钻石</p>
								</div>
								<div class="right flex_column_around">
									<p style="font-size: 12px;">好友注册，即领奖励</p>
									<p style="font-size: 10px;">最高可领88888钻石</p>
								</div>
							</div>
							<div class="listOne flex">
								<img src="../../image/img/rw_center1/bg_two.png" alt="" class="bg_one">
								<img src="../../image/img/rw_center1/circle.png" alt="" class="circle">
								<div class="left flex_column_center" style="color: #A074F9;">
									<p style="font-size: 12px;">10%</p>
									<p style="font-size: 10px;">现金</p>
								</div>
								<div class="right flex_column_around">
									<p style="font-size: 12px;">好友充值</p>
									<p style="font-size: 10px;">好友充值1000元，你获得100元奖励</p>
								</div>
							</div>
							<div class="listOne flex">
								<img src="../../image/img/rw_center1/yellow.png" alt="" class="bg_one">
								<img src="../../image/img/rw_center1/circle1.png" alt="" class="circle">
								<div class="left flex_column_center" style="color: #FF9600;">
									<p style="font-size: 12px;">10%</p>
									<p style="font-size: 10px;">现金</p>
								</div>
								<div class="right flex_column_around">
									<p style="font-size: 12px;color: #FCE0DA;">好友收益</p>
									<p style="font-size: 10px;color: #FCE0DA;">好友收益1000元，你获得100元奖励</p>
								</div>
							</div>
						</div>
					</div>
				</div>


			</div>


		</div>









<!-- 


        <div class="wrap">
            <div class="top">
               
                <div class="t-content">
                    <div class="word" style="padding: 0 15vw;" v-html="shareTxt">
                       
                    </div>
                    <p class="code">我的邀请码：<span>{{ffInfo.send_code}}</span> <button class="btn" onclick="copyTxt(view.ffInfo.send_code)">复制</button></p>
                    <img class="share-btn" onclick="openShare()" src="../../image/member/icon_button_invit.gif" alt="">
                </div>
            </div>
            <div class="list-wrap">
                <ul class="nav-ul flex-a">
                    <li class="list" :class="{'active':aIndex==0}" @click="aIndex=0">收益明细</li>
                    <li class="list" :class="{'active':aIndex==1}" @click="aIndex=1">邀请人数</li>
                    <li class="list" :class="{'active':aIndex==2}" @click="aIndex=2">奖励排行</li>
                </ul>
                <div class="ul-wrap">
                    <div class="sy-wrap" v-if="aIndex==0">
                        <ul class="sy-ul" v-if="syList.length>0">
                            <li class="list" v-for="(m, index) in syList">
                                <div class="left">
                                    <p class="name">{{m.content}}</p>
                                    <p class="time">{{m.time}}</p>
                                </div>
                                <span class="price">+{{m.money}}</span>
                            </li>
                        </ul>
                        <p class="tip" v-else>快去<span class="warn" onclick="openShare()">邀请好友</span>赚收益 </p>
                    </div>
                    <div class="yao-wrap" v-if="aIndex==1">
                      
                        <div class="title flex">总邀请人数<h3>{{ffInfo.invite_count}}人</h3>
                        </div>
                        <ul class="yao-ul">
                            <li class="list" v-for="(m, index) in yaoList">
                                <div class="left">
                                    <img class="tx" :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" alt="">
                                    <p class="name">{{m.name}}</p>
                                </div>
                                <p class="time">{{m.register_datetime}}</p>
                            </li>
                        </ul>
                    </div>
                    <div class="rw-wrap" v-if="aIndex==2">
                        <ul class="rw-ul">
                            <li class="list" v-for="(m, index) in rwList">
                                <div class="left flex">
                                    <div class="l">
                                        <i v-if="index<3" class="base-icon " :class="'icon'+(index+1)"></i>
                                        <span class="num" v-else>{{index+1}}</span>
                                    </div>
                                    <img :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" class="tx" alt="">
                                </div>
                                <span class="price">共奖励{{m.money}}</span>
                            </li>
                           
                        </ul>
                    </div>
                </div>
            </div>
            <p class="more" onclick="_url({url:'about', id: 14, title:'活动规则'})">活动规则>></p>
        </div> -->
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架

            shareTxt: '',
            aIndex: 0,
            dataObj: {
                0: { // 收益
                    page: 1,
                    bottom: 0,
                },
                1: { // 邀请
                    page: 1,
                    bottom: 0,
                },
                2: { // 奖励
                    page: 1,
                    bottom: 0,
                },
            },
            syList: [], // 收益
            yaoList: [], // 邀请
            rwList: [], // 奖励

        },
        methods: {
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function() {
        getPageContent(7, function(data) {
            view.shareTxt = data.body;
        })
        _getUser(function(ret) {
            view.ffInfo = ret.result;
        })
        getSY()
        getYao()
        getRW();
        _scrollToBottom(function() {
            if (view.dataObj[view.aIndex].bottom == 0) {
                getData();
            }
        })
    }


    function getData() {
        view.dataObj[view.aIndex].page++;
        switch (view.aIndex) {
            case 1:
                getYao()
                break;
            case 2:
                getRW();
                break;
            default:
                getSY()
                break;
        }
    }

    // 收益明细
    function getSY() {
        _ajax('api/member/income', function(ret, err) {
            if (ret && ret.code == 200) {
                if (ret.data.length > 0) {
                    view.syList = view.syList.concat(ret.data);
                } else {
                    view.dataObj[0].bottom = 1;
                }
            }
        }, {
            user_id: $api.getStorage('userid'),
            page: view.dataObj[1].page
        })
    }
    // 邀请列表
    function getYao() {
        _ajax('api/Member/team', function(ret, err) {
            if (ret && ret.code == 200) {
                if (ret.data.length > 0) {
                    view.yaoList = view.yaoList.concat(ret.data);
                } else {
                    view.dataObj[1].bottom = 1;
                }
            }
        }, {
            id: $api.getStorage('userid'),
            level: 1,
            page: view.dataObj[1].page
        })
    }
    // 奖励排行榜
    function getRW() {
        _ajax('api/member/rewardRanking', function(ret, err) {
            if (ret && ret.code == 200) {
                view.dataObj[2].bottom = 1;
                if (ret.data.length > 0) {
                    view.rwList = view.rwList.concat(ret.data);
                } else {
                    view.dataObj[2].bottom = 1;
                }
            }

        }, {
            page: view.dataObj[2].page
        })
    }

    function openShare() {
        showDetail('frame0/share')
        return;
        // var buttons = ['海报', '链接'];
        // _action('', buttons, function(bIndex) {
        //     if (bIndex != buttons.length + 1) {
        //         if (bIndex == 1) {
        //             _url({
        //                 url: 'frame4/ewm',
        //                 title: '海报'
        //             })
        //         } else {
        //             showDetail('frame0/share')
        //         }
        //     }
        // })

    }
</script>

</html>